<template>
    <div>
        房间名称：
        <input type="text" v-model="query.Name">
        状态：
        <input type="radio" v-model="query.State" name="State" value="true">启用
        <input type="radio" v-model="query.State" name="State" value="false">禁用
        <input type="button" value="查询" @click="Cha">
        <input type="button" value="重置" @click="chong">
        <table border="1">
            <thead>
                <tr>
                    <th>房间名称</th>
                    <th>销售价格</th>
                    <th>房间数量</th>
                    <th>状态</th>
                    <th>房间号</th>
                    <th>房间总数</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="h in data">
                    <th>{{ h.Name }}</th>
                    <th>${{ h.Price }}</th>
                    <th>{{ h.Num }}</th>
                    <th>{{ h.State?"启用":"禁用" }}</th>
                    <th>{{ h.HomeNum }}</th>
                    <th>{{h.HomeCount}}</th>
                    <th>
                        <input type="button" value="删除" @click="Del(h.Id)">
                    </th>
                    <th>
                        <input type="button" value="编辑" @click="Update(h.Id)">
                    </th>
                </tr>
            </tbody>
        </table>
        一共  {{querydata.count  }} 条
        当前第 {{ query.PageIndex }}  页
        一共 {{ querydata.pagecount }}  页
        一页 {{ query.PageSize }}  条
        <input type="button" v-for="d in querydata.pagecount" :value="d" @click="AN(d)"  >
        <input type="button" value="首页" @click="Fen(1)">
        <input type="button" value="上一页" @click="Fen(2)">
        <input type="button" value="下一页" @click="Fen(3)">
        <input type="button" value="尾页" @click="Fen(4)">
        <input type="number" v-model="query.PageSize" @click="YI">
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { onMounted } from 'vue';
import type { RefSymbol } from '@vue/reactivity';
import { useRouter } from 'vue-router';

const router=useRouter();

const Update=(val:any)=>{
    router.push({path:'/DetailView',query:{Id:val}})
}


const Del=(val:any)=>{
    if(confirm('确认删除吗？')){
        axios.delete("https://localhost:7039/api/Member/DelMember",{params:{Id:val}}).then(res=>{
        if(res.data>0){
            alert('删除成功')
            Show();
        }
        else{
            alert('失败')
        }
    })
    }
    
}


const Cha=()=>{
    query.value.PageIndex=1;
    Show();
}

const chong=()=>{
    query.value.Name=""
    query.value.State=""
    Show();
}


const AN=(d:any)=>{
    query.value.PageIndex=d;
    Show();
}

const YI=()=>{
    Show();
}

const data=ref([{
    "Id": 0,
  "Name": "string",
  "Price": 0,
  "Num": 0,
  "State": true,
  "HomeNum": "string",
  "Delete": true,
  "HomeCount":""
}])


const Fen=(val:any)=>{
    if(val==1){
        query.value.PageIndex=1;
        Show();
    }
    if(val==2){
        if(query.value.PageIndex>1){
            query.value.PageIndex-=1;
            Show();
        }
    }
    if(val==3){
        if(query.value.PageIndex<querydata.value.pagecount){
            query.value.PageIndex+=1;
            Show();
        }
    }

    if(val==4){
        query.value.PageIndex=querydata.value.pagecount;
        Show();
    }
}


const query=ref({
    PageIndex:1,
    PageSize:4,
    Name:"",
    State:""
})


const querydata=ref({
    count:0,
    pagecount:0
})


onMounted(()=>{
    Show();
})

const Show=()=>{
    axios.get("https://localhost:7039/api/Member/GetMember",{params:query.value}).then(res=>{
        data.value=res.data.list;
        querydata.value.count=res.data.count;
        querydata.value.pagecount=Math.ceil(querydata.value.count/query.value.PageSize)  

    })
}


</script>

